<template>
	<view class="ask-main" >
		<view>
			<view class="car-detail bgfff">
				<image class="car-img" lazy-load="true" :src="car.image"></image>
				<view class="car-des">
					<view class="f34 c333 bold">{{car.v_name}}</view>
					<view class="f30 c333 mt18 lh34">{{car.name}}</view>
					<view class="f26 mt22">优惠:
						<text class="price">{{car.price}}万起</text>
						<text class="gray-price">{{car.fac_price}}万</text>
					</view>
				</view>
			</view>
			<!-- 经销商 -->
			<view class="s-tips bgfff">
				<view class="f30  c333">经销商信息</view>
				<view class="tips mt20">名称：{{distributor.name}}</view>
				<view class="tips">电话：{{distributor.mobile}}</view>
			</view>
			<!-- 详细列表进入展示 -->
			<view class="s-tips bgfff">
				<view class="f30  c333">服务说明</view>
				<view class="tips mt20">1、该服务只针对选择的车型</view>
				<view class="tips">2、购买服务后，平台将为您锁定优惠价格及权益，并为您提供专业的购车指导服务</view>
				<view class="tips">3、平台优惠价仅供参考，具体以实际成交价格为准</view>
			</view>
			<view class="field-cell bgfff">
				<view class="field-cell__inner">
					<label class="field-cell__label">联系电话</label>
				</view>
				<view class="field-cell__inner field-cell__inner-phone">
					<input type="text" v-model="phone" placeholder="请输入联系电话"/>
					<phone-button @change="phone = $event"></phone-button>
				</view>
			</view>
			<view class="field-cell">
				<view class="field-cell__inner">
					<label>外观</label>
				</view>
				<view class="field-cell__inner">
					<u-radio-group v-model="out_color" active-color="#fc830c" class="field-cell__radio-group">
						<u-radio v-for="(item,index) in outColorList" :key="index" :name="item">
							{{item}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="field-cell ">
				<view class="field-cell__inner">
					<label>内饰</label>
				</view>
				<view class="field-cell__inner">
					<u-radio-group v-model="inter_color" active-color="#fc830c" class="field-cell__radio-group">
						<u-radio v-for="(item,index) in interColorList" :key="index" :name="item">
							{{item}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="field-cell">
				<view class="field-cell__inner">
					<label>上牌城市</label>
				</view>
				<view class="field-cell__inner">
					<input type="text" v-model="buy_city" />
				</view>
			</view>
			<view class="field-cell">
				<view class="field-cell__inner">
					<label>购买方式</label>
				</view>
				<view class="field-cell__inner">
					<u-radio-group v-model="type" active-color="#fc830c" class="field-cell__radio-group">
						<u-radio v-for="(item,index) in ['全款','分期']" :key="index" :name="item">
							{{item}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="field-cell">
				<view class="field-cell__inner">
					<label>提车日期</label>
				</view>
				<view class="field-cell__inner">
					<picker mode="date" :value="buy_date" @change="buy_date=$event.detail.value">
						 <view class="uni-input">{{buy_date}}</view>
					</picker>
				</view>
			</view>
			<!--  -->
			<view class="s-price bgfff">
				<view class="t-f1 f30 c333 tl">服务费用</view>
				<view class="t-f1 f30 tr ce418"><text class="f20">¥</text>{{price}}</view>
			</view>
			<u-checkbox-group class="pact-list">
				<u-checkbox v-model="readChecked" shape="circle">
					<view class="pact-list__title">我已阅读并同意 </view>
				</u-checkbox>
				<view class="pact-list__text">
					<navigator class="pact-list__link" url="/pages/used-car/xieyi?type=0">《个人信息保护声明》</navigator>
					<navigator class="pact-list__link" url="/pages/used-car/xieyi?type=4">《车一转个人隐私保护协议》</navigator>
				</view>
			</u-checkbox-group>
			<view class="buy-btn" @click="toPay">购买服务</view>
		</view>
	</view>
</template>

<script>
	import PhoneButton from '@/pages/components/public/phone-button.vue'
	import {askshop,revPlat,wPay} from "../../../../apis/new-car/index.js"
	export default {
		data() {
			return {
				car:{},
				distributor:{},
				price:0,
				outColorList:[],
				interColorList:[],
				readChecked:false,
				inter_color:'',
				out_color:'',
				type:'',
				city:'',
				buy_city:'',
				phone:'',
				buy_date:'',
				yum:'',
				distrib_id:'',
				params:{
					guid:'', // 用户id uid
					headimgurl:'', // 用户头像
					name:'',// 姓名
					openid:'', // openid
					phone:'', // 手机号
					factory_id:'', // 用户来源id
					v_name:'', // 车系名字
					yum:'', // 来源 1平台 2是个商,
					car_name:'', // 车型名字
					car_id:'', // 车型id
					distrib_id:'', // 经销商id
					city: '', // 车源城市
					image:'', // 车型图片
					buy_city:'', // 提车城市
					type:'', // 购买方式
					buy_date:'', // 提车日期
					s_factory_id:'' ,// 商户来源
					inter_color:'',// 
					out_color:''
				}
			}
		},
		components:{
			PhoneButton
		},
		async onLoad(option) {
			const {data} = await askshop({car_id: option.cid,distrib_id: option.sid})
			this.car = data.car
			this.distributor = data.distributor
			this.outColorList = uni.getStorageSync('outColorList')
			this.interColorList = uni.getStorageSync('interColorList')
			this.buy_city = uni.getStorageSync('position')
			this.buy_date = this.$u.timeFormat(+new Date())
			this.inter_color = option.inter_color
			this.out_color = option.out_color
			this.city = option.city.replace("市",'')
			this.price = option.price
			this.yum = option.yum
			this.distrib_id = option.sid
		},
		methods: {
			async toPay(){
				const userInfo = uni.getStorageSync('userInfo')
				this.params.guid = uni.getStorageSync('userId')
				this.params.openid = uni.getStorageSync('openId')
				this.params.factory_id = uni.getStorageSync('factory_id')
				this.params.headimgurl = userInfo.avatarUrl
				this.params.name = userInfo.nickName
				this.params.car_id = this.car.id
				this.params.yum = this.yum
				this.params.phone = this.phone
				this.params.v_name = this.car.v_name
				this.params.car_name = this.car.name
				this.params.distrib_id = this.distrib_id
				this.params.city = this.city
				this.params.image = this.car.image
				this.params.buy_city = this.buy_city
				this.params.type = this.type
				this.params.buy_date = this.buy_date
				this.params.s_factory_id = this.distributor.s_factory_id
				this.params.out_color = this.out_color
				this.params.inter_color = this.inter_color
							
				if(!(/^1[3456789]\d{9}$/.test(this.params.phone))){
					uni.showToast({title: '请输入正确手机号',icon:'none'})
					return false;
				}
				if(!this.params.out_color){
					uni.showToast({title: '请选择外观',icon:'none'})
					return false;
				}
				if(!this.params.inter_color){
					uni.showToast({title: '请选择内饰',icon:'none'})
					return false;
				}
				if(!this.params.city){
					uni.showToast({title: '请输入上牌城市',icon:'none'})
					return false;
				}
				if(!this.params.type){
					uni.showToast({title: '请选择购买方式',icon:'none'})
					return false;
				}
				if(!this.readChecked){
					uni.showToast({title: '请先阅读协议并同意',icon:'none'})
					return false;
				}

				//https://apizza.net/pro/#/project/352fbeed44f38f7b5c86828880f23369/browse?pass=e10adc3949ba59abbe56e057f20f883e
				const {code,data,msg} = await wPay(this.params)
				if(code === 1){
						uni.requestPayment({
							provider: 'wxpay', //支付类型
							appId: data.appId, //小程序Appid
							timeStamp: data.timeStamp, //创建订单时间戳
							nonceStr: data.nonceStr,
							package: data.package, // 订单包
							signType: 'MD5', // 加密方式统一'MD5'
							paySign: data.paySign, // 后台支付签名返回
							success(res) {
								uni.showToast({title: '支付成功！',icon: 'success'})
								uni.navigateBack()
							},
							fail(err) {
								uni.showToast({title: '支付失败！',icon: 'error'})
							}
					})
				}else{
					uni.showToast({title: msg , icon: 'error'})
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.field-cell{
		margin: 30rpx 0;
		padding:30rpx;
		display: flex;
		font-size: 30rpx;
		background-color: #FFFFFF;
		&__inner{
			&-phone{
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			&:first-child{
				color: #999999;
				width: 150rpx;
			}
			&:last-child{
				flex: 1;
			}
		}
		&__radio-group{
			margin-top: -6rpx;
			display: block;
		}
	}
	.ask-main {
		height: 100vh;
		background: #f8f8f8;

		.bgfff {
			background: #fff;
		}

		.lh34 {
			line-height: 34rpx !important;
		}

		.mt20 {
			margin-top: 20rpx;
		}

		.car-detail {
			// width: 100%;
			// height: 176rpx;
			padding: 30rpx;
			display: flex;
			border-bottom: 2rpx solid #F6F6F6;
			word-break: break-all;
			align-items: center;
		}

		.car-img {
			width: 200rpx;
			height: 150rpx;
			background: #000;
			border-radius: 10rpx;
		}

		.car-des {
			margin-left: 20rpx;
			flex: 2;
		}

		.f34 {
			font-size: 34rpx;
			line-height: 34rpx;
		}

		.c333 {
			color: #333;
		}

		.f30 {
			line-height: 30rpx;
			font-size: 30rpx;
		}

		.f26 {
			line-height: 26rpx;
			font-size: 26rpx;
		}

		.mt18 {
			margin-top: 18rpx;
		}

		.mt22 {
			margin-top: 22rpx;

		}

		.price {
			color: #E41805;
		}

		.gray-price {
			color: #808080;
			text-decoration: line-through;
			margin-left: 20rpx;
		}

		.ml46 {
			margin-left: 46rpx;
		}

		.s-tips {
			padding: 30rpx;
			margin: 20rpx 0;
		}

		.tips {
			font-size: 24rpx;
			line-height: 40rpx;
			color: #999;
		}

		.s-price {
			display: flex;
			padding: 0 30rpx;
			height: 88rpx;
			align-items: center;
		}

		.t-f1 {
			flex: 1;
		}

		.tl {
			text-align: left;
		}

		.tr {
			text-align: right;
		}

		.ce418 {
			color: #e41805;
		}

		.f20 {
			font-size: 20rpx;
		}

		.buy-btn {
			margin: 30rpx;
			height: 90rpx;
			font-size: 32rpx;
			line-height: 90rpx;
			text-align: center;
			color: #fff;
			border-radius: 16rpx;
			background: #e41805;
		}

		.rule-tips {
			margin: 18rpx 30rpx 0;
			font-size: 22rpx;
			line-height: 44rpx;
			text-align: center;
		}

		.c006 {
			color: #0064EC;
		}

	}
	
.pact-list{
		padding: 20rpx 30rpx;
		display: flex;
		&__title{
			font-size: 24rpx;
			margin: 10rpx 0;
		}
		&__text{
			display: flex;
			font-size: 24rpx;
			color: #808080;
			width: 100%;
		}
		&__link{
			color: #0083F0;
		}
}
</style>
